const loginPage = () => {
    const {
      createApp,
      reactive,
      toRefs,
      ref,
      computed,
      onMounted,
      watch,
    } = Vue;
  
    const { useRoute } = VueRouter;
  
    const vue3Composition = {
      setup() {
        const route = useRoute();
        // watch(() => route, (newId, oldId) => {
        //   console.log('route, router', newId);
        //   console.log('route, route11r', oldId);
        // })

        const loginFormRef = ref();
        const loginForm = reactive({
          name: '',
          password: '',
          isRemember: false
        });

        const loginRules = reactive({
          name: [
            {
              required: true,
              message: '请填写用户名',
              trigger: 'blur',
            },
          ],
          password: [
            {
              required: true,
              message: '请填写密码',
              trigger: 'blur',
            },
          ],
        });

        // 点击登录
        const submitLoginForm = async (formRef) => {
          formRef.validate(async (valid, fields) => {
            if (valid) {
              console.log('submit!')
              const res = await fetchData('https://cloud.lugangwool.com/server/loginfo.php?dbcl=',
              {
                syspass: 'qazwsx123',
                sysuser: '888888',
              }, {});
              console.log('res123:', res);
              if(res){
                localStorage.setItem('loginData', JSON.stringify(res));
                window.location.href = 'index.html';
              }
            } else {
              console.log('error submit!', fields)
            }
          })
        }
  
        watch(() => route.path,(newPath, oldPath) => { 
          console.log('new Path login', newPath);
          // handleMenuSelect(newPath.replace('/', ''));
        },{ immediate: true });
  
        //#region 内容展示区域
        onMounted(() => {
          // 如果初始化进来时带路由，就重定向到该菜单，否则进来进首页
          console.log('routelogin: ', route);
          // const index = route.path.replace('/', '');
          const index = window.location.href.split('/')[4];
          
        });
        //#endregion
  
        return {
          loginFormRef,
          loginForm,
          loginRules,
          submitLoginForm
        };
      },
    };
  
    const app = createApp(vue3Composition);

    // 1. 定义（路由）组件。
   const com1 = { template: '<div>路由1</div>' }
   const com2 = { template: '<div>路由2</div>' }
   
   // 2. 定义路由
   // 每个路由应该映射一个组件。 其中"component" 可以是 通过 Vue.extend()
   //  创建的组件构造器， 或者，只是一个组件配置对象.
   const routes = [
      //  { path: '/', component: },
   ]
   
   // 3. 创建 router 实例，然后传 `routes` 配置
    const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      // history: VueRouter.createWebHistory(),
      routes
    })

    router.beforeEach(async (to, from) => { 
      console.log('from', from);  
      console.log('to', to);
      console.log(app);
      if (to.fullPath) {
        // const id = to.fullPath.replace('/', '');
        // handleMenuSelect(id);
      }
    });
    router.afterEach(async () => {});
    app.use(router);
    app.use(ElementPlus).mount("#login");

    return app;
  };
  